import React, {Component} from 'react';
import {Select, Timeline, Icon} from 'antd';

export default class History extends Component {
    handleChange(value) {
        alert(`selected ${value}`);
    }

    render() {
        const Option = Select.Option;

        return (
            <div className="well">
                <div className="text-center mrb30">
                    <Select defaultValue="2019" style={{width: "15%"}} className="text-center"
                            onChange={this.handleChange}>
                        <Option value="2019"><Icon type="calendar" /> 2019大事记</Option>
                        <Option value="2018"><Icon type="calendar" /> 2018大事记</Option>
                        <Option value="2017"><Icon type="calendar" /> 2017大事记</Option>
                    </Select>
                </div>
                {/*切换的时间线*/}
                <Timeline mode="alternate">
                    <Timeline.Item>
                        <h4><a href="http://www.baidu.com">《焊接新技术的应用与趋势》要讨会</a></h4>
                        <p>焊接新技术的应用与趋势焊接新技术的应用与趋势焊接新技术的应用与趋势焊接新技术的应用与趋势</p>
                    </Timeline.Item>
                    <Timeline.Item>
                        <h4><a href="http://www.baidu.com">《焊接新技术的应用与趋势》要讨会</a></h4>
                        <p>焊接新技术的应用与趋势焊接新技术的应用与趋势焊接新技术的应用与趋势焊接新技术的应用与趋势</p></Timeline.Item>
                    <Timeline.Item>
                        <h4><a href="http://www.baidu.com">《焊接新技术的应用与趋势》要讨会</a></h4>
                        <p>焊接新技术的应用与趋势焊接新技术的应用与趋势焊接新技术的应用与趋势焊接新技术的应用与趋势</p>
                    </Timeline.Item>
                    <Timeline.Item>
                        <h4><a href="http://www.baidu.com">《焊接新技术的应用与趋势》要讨会</a></h4>
                        <p>焊接新技术的应用与趋势焊接新技术的应用与趋势焊接新技术的应用与趋势焊接新技术的应用与趋势</p>
                    </Timeline.Item>
                </Timeline>
            </div>
        );
    }
}

